<template>
	<div class="abody">
		<div class="abody_wrap">
			<div class="item" v-for="(item,index) in showData" :key="index">
				<a :href="'https://m.bilibili.com/video/av'+item.aid+'.html'" class="item_wrap">
					<div class="item_img">
						<img src="../assets/tv.png" class="bgImg"/>
						<img v-lazy="item.pic" alt="" class="indexImg" />
					</div>
					<div class="play_wrap">
						<div class="play_icon">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xlink:href="#icon-bofangshu"></use></svg>
						</div>
						<div class="play_total">
							<p>{{numChange(item.play)}}</p>
						</div>
						<div class="play_danmu">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xlink:href="#icon-danmushu"></use></svg>
						</div>
						<div class="danmu_total">
							<p>{{item.video_review}}</p>
						</div>
					</div>
				</a>
				<a :href="'https://m.bilibili.com/video/av'+item.aid+'.html'" class="title">
					<p>
						{{item.title}}	
					</p>
				</a>
			</div>
		</div>
	</div>
</template>

<script>
//	import CONFIG from '@/router/config';
	import axios from 'axios';
	let listLength = 20;
	export default {
		data() {
			return {
				data: [],
				showData:[]
			}
		},
		created(){
			let self = this;
			$(window).scroll(function(){
//				console.log($(document))
				let scrollTop = $(this).scrollTop()
    			let scrollHeight = $(document).height()
    			let windowHeight = $(this).height()
    			if (scrollTop + windowHeight === scrollHeight) {
//  				console.log(self.data.length)
//  				if(a<self.data.length){
//  					a+=20
//  					console.log(a)
    					self.showLength()
//  					console.log(1)
//  				}
    			}
			})
		},
		mounted(){
//			const ur = CONFIG.domain + '/bilibili?rid=2';
			axios.get('/bilibili?rid=2').then((res) => {
//					console.log(res.data.data)
				this.data = res.data.data
//				console.log(this.data.length)
//					this.data.forEach((el)=>{
////						this.showdLenght(el)
//					})
//				console.log(this.showData)
			}).then(()=>{
				this.showLength()
			})
		},
		methods:{
			showLength(){
				let con = this.data.splice(0,listLength);
				this.showData=this.showData.concat(con)
//				if(this.showData.length<=0){
//					for(let i=0;i<listLength;i++){
//						this.showData.push(this.data[i])
//					}
//				}else{
//					for(let i=0;i<listLength;i++){
//						console.log(this.showData[1])
//					}
//				}
			},
			numChange(list){
				return list>10000?(list/10000).toFixed(1)+'万':list
			}
		}
	}
</script>

<style lang="scss" scoped>
	.abody{
	    position: relative;
	    width: 100%;
	    padding-top: 12px;
	    .abody_wrap{
    	    position: relative;
		    padding-left: 6px;
		    padding-right: 6px;
		    display: flex;
		    flex-wrap:wrap;
		    .item{
		    	width: 50%;
		    	margin-bottom: 16px;
		    	padding: 0 6px;
		    	.item_wrap{
		    		display: block;
		    		text-decoration: none;
	    		    position: relative;
				    width: 100%;
				    overflow: hidden;
				    margin: auto;
				    border-radius: 5px;
				    background-color: #e7e7e7;
				    background-image: linear-gradient(transparent 50%,rgba(0,0,0,.5));
					.item_img{
						width: 100%;
						height: 106px;
						.bgImg{
							position: relative;
							display: block;
							width: 60%;
							height: 106px;
							margin: auto;
						}
						.indexImg{
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
						}
					}
					.play_wrap{
						display: flex;
						position: absolute;
						left: 0;
						bottom: 0;
						height: 16px;
						width: 100%;
						padding-left: 8px;
					    background: linear-gradient(180deg,rgba(33,33,33,0),rgba(33,33,33,.5));
					    .play_icon{
					    	width: 16px;
					    	margin-top: -1.5px;
					    	svg{
				    		    display: block;
							    width: 100%;
					    		height: 16px;
							    fill: #fff;
					    	}
					    }
					    .play_total{
					    	margin-left: 6px;
					    	width: 48px;
					    	p{
					    		text-align: left;
							    font-size: 12px;
							    color: #fff;
							    line-height: 14px;
							    transform: scale(0.8);
					    		transform-origin: left;
					    	}
					    }
					    .play_danmu{
					    	width: 16px;
					    	margin-top: -1.5px;
					    	svg{
				    		    display: block;
							    width: 100%;
					    		height: 16px;
							    fill: #fff;
					    	}
					    }
					    .danmu_total{
					    	margin-left: 6px;
					    	width: 48px;
					    	p{
					    		text-align: left;
							    font-size: 12px;
							    color: #fff;
							    line-height: 14px;
							    transform: scale(0.8);
					    		transform-origin: left;
					    	}
					    }
					}
		    	}
		    	.title{
		    		display: block;
		    		text-decoration: none;
		    		width: 100%;
				    position: relative;
				    margin: auto;
				    margin-top: 5px;
				    overflow: hidden;
				    height: 32px;
				    p{
			    	    font-size: 12px;
					    color: #212121;
					    letter-spacing: 0;
					    text-align: left;
					    line-height: 16px;
					    
				    }
		    	}
		    }
	    }
	}

</style>